<template>
  <el-container :class="[$store.state.appPrefix + '-my-app']">
    <el-header v-if="!isNotHeaderModule"><page-header></page-header></el-header>
    <el-container :class="[$store.state.appPrefix + '-my-app-container']">
      <el-main :class="[$store.state.appPrefix + '-my-app-main']">
        <!-- <page-bread-crumb v-if="!isHomeModule"/> -->
        <div :class="[$store.state.appPrefix + '-my-app-wrap', {'not-header-module': isNotHeaderModule}]">
          <div :class="[$store.state.appPrefix + '-my-app-content']">
            <router-view />
            <!-- <div :class="[$store.state.appPrefix + '-my-app-content__bottom--divider']"></div> -->
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { setItem, getItem, removeItem } from 'common/storage'
import LoginBox from 'components/login-pop'
import PageHeader from 'components/header'
import PageBreadCrumb from 'components/bread-crumb'
import { WEB_TITLE_PREFIX } from 'common/consts'
import { getUserInfoFromCache } from './models'
import { USER_INFO, PAGE_STATUS_INFO } from 'store/mutation-types'
import { checkUserLogin } from 'common/auth'

export default {
  components: {
    LoginBox,
    PageHeader,
    PageBreadCrumb
  },
  data() {
    return {
      isInitiApp: false
    }
  },
  computed: {
    isNotHeaderModule() {
      return this.$route.meta.isNotHeaderModule || false
    },
    userInfo() {
      const info = this.$store.state.user.userInfo
      console.log('userInfo:', info)
      return info
    }
  },
  watch: {
    '$route.name': {
      handler() {
        const title = this.$route.meta.title
        const sysname = this.userInfo && this.userInfo.companySysName || WEB_TITLE_PREFIX
        document.title = `${title} | ${sysname}`
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    $initApp() {
      const userInfo = getUserInfoFromCache()
      this.$store.commit(USER_INFO, userInfo)
    },
    $initPageStatusInfo() {
      const pageStatusInfo = getItem('pageStatusInfo')
      removeItem('pageStatusInfo')
      this.$store.commit(PAGE_STATUS_INFO, pageStatusInfo)
    }
  },
  created() {
    this.$initPageStatusInfo()
    if (checkUserLogin() !== true) {
      this.$store.state.needShowLoginPop = true
    } else {
      this.$initApp()
    }
  },
  mounted() {
    window.onbeforeunload = () => {
      setItem('pageStatusInfo', JSON.stringify(this.$store.state.pageStatusInfo))
      return null;
    };
  }
}
</script>
